<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="username">
    {{username}}
    <!-- 指令修饰符：lazy再change的时候才会修改 -->
    <input type="text" v-model.lazy="username1">
    {{username1}}
    <!-- 双向绑定选中的value值，默认为空则一个都不选中，默认值为哪一个value就默认选中它 -->
    <select v-model="like">
      <option value="唱">唱</option>
      <option value="跳">跳</option>
      <option value="rap">rap</option>
      <option value="篮球">篮球</option>
    </select>
    {{like}}

    <!-- <select v-model="likes" multiple size="2">
      <option value="唱">唱</option>
      <option value="跳">跳</option>
      <option value="rap">rap</option>
      <option value="篮球">篮球</option>
    </select>
    {{likes}} -->

    <p>
      <label><input v-model="likes" type="checkbox" value="唱">唱</label>
      <label><input v-model="likes" type="checkbox" value="跳">跳</label>
      <label><input v-model="likes" type="checkbox" value="rap">rap</label>
      <label><input v-model="likes" type="checkbox" value="篮球">篮球</label>
      {{likes}}
    </p>

    <p>
      你要找
      <input type="radio" v-model="friend" value="男朋友">男朋友
      <input type="radio" v-model="friend" value="女朋友">女朋友
      {{friend}}
    </p>

  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        username1: '',
        like: '篮球',
        likes: [],
        friend: ''
      }
    })
  </script>
</body>
</html>
